import {h,thunk,init} from 'snabbdom';
import './index.css'
let patch = init([])

let title= h('div',[
    h('div#title',[
        h('div.left',[  h('h3.yellow','Sort By:'),
        h('a.yellow.unSelect',[h('span','Rank')]),
        h('a.yellow.unSelect',[h('span','Title')]),
        h('a.yellow.unSelect',[h('span','Description')])]),
        h('div.right',[h('h3','Add')]),
      
      
    ]),


  
]);

let content = [{
    rank:8,
    title:'The Good,The bad and the Ugly',
    des:'A bounty hunting scam joins two men in an uneasy alliance against a third'
},{
    rank:7,
    title:'12 Angry Men',
    des:'A dissenting' 
},{
    rank:10,
    title:'Fight',
    des:'A insomniac' 
}]

let card1 = h('div.card',[
    h('div.part',[ h('p.yellow','8'),]),
    h('div.part',[ h('p.yellow','The Good,The bad and the Ugly'),]),
    h('div.part',[  h('p.yellow','A bounty hunting scam joins two men in an uneasy alliance against a third')]),
    h('div.cancel')
]);

let card = (rank,title,des)=>{
    return h('div.card',[
        h('div.part',[  h('p.yellow',rank),]),
        h('div.part',[  h('p.yellow',title),]),
        h('div.part',[  h('p.yellow',des)]),
        h('div.cancel','x')
    ]);
}

let vnode = h('div#container',[
    h('h1.yellow','Top 10 movies'),
    title,

    h('div.content',

        
        content.map((item)=>card(item.rank,item.title,item.des))
    )
])

let app = document.getElementById('app');

patch(app,vnode);
